<template>
  <div class="content-center">
    <!-- 页面标签/页面tab -->
    <div class="content-cotainer border-box">
      <!-- 面包屑 -->
      <div class="content-breadcrumb">
        <el-breadcrumb separator="/" class="breadcrumb">
          <el-breadcrumb-item :to="{ path: '/' }">系统管理</el-breadcrumb-item>
          <el-breadcrumb-item>审计文书模版</el-breadcrumb-item>
        </el-breadcrumb>
      </div>
      <!-- 页面内容-->
      <div class="content-box">
        <div class="audit-content">
          <div class="centent-title">
            <span>电子数据管理</span>
          </div>
          <div class="centent-inner">
            <div class="btn-box">
              <button class="btn btn-primary">
                <i class="iconfont icon-user"></i>
                <span>添加模版分类</span>
              </button>
              <button class="btn btn-primary">
                <i class="iconfont icon-password"></i>
                <span>删除模版分类</span>
              </button>
              <button class="btn btn-primary">
                <i class="glyphicon-plus"></i>
                <span>修改模版分类</span>
              </button>
              <button class="btn btn-primary">
                <i class="glyphicon-plus"></i>
                <span>添加模版文档</span>
              </button>
              <button class="btn btn-primary">
                <i class="glyphicon-plus"></i>
                <span>删除模版文档</span>
              </button>
              <button class="btn btn-primary">
                <i class="glyphicon-plus"></i>
                <span>修改模版说明</span>
              </button>
              <button class="btn btn-primary">
                <i class="glyphicon-plus"></i>
                <span>查找</span>
              </button>
              <button class="btn btn-primary">
                <i class="glyphicon-plus"></i>
                <span>刷新</span>
              </button>
            </div>
            <div class="inner-box">
              <div class="inner-left">
                <div class="inner-header">文档模版分类</div>
                <div class="inner-left-content">
                  <el-tree :data="treeData" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
                </div>
              </div>
              <div class="inner-right">
                <div class="inner-header">文档模版列表</div>
                <div class="inner-right-content">11111</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      treeData: [
        {
          label: "文档分类模板信息",
          children: [
            {
              label: "准备阶段",
              children: [
                {
                  label: "内部控制调查模版"
                }
              ]
            },
            {
              label: "实施阶段",
              children: [
                {
                  label: "审计文书模板"
                },
                {
                  label: "内部控制调查模板"
                },
                {
                  label: "内部控制调查模板"
                }
              ]
            },
            {
              label: "报告阶段",
              children: [
                {
                  label: "审计文书模板"
                },
                {
                  label: "审计项目报表模版"
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: "children",
        label: "label"
      }
    };
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
    }
  }
};
</script>

<style lang="less" scoped>
.content-cotainer {
  padding: 0 20px 20px 20px;
  height: 100%;
  .content-box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: flex-start;
  }
  .centent-inner {
    padding: 0 20px 20px 20px;
    .btn-box {
      width: 100%;
      height: 32px;
      margin: 20px 0;
      display: flex;
      justify-content: flex-start;
      .btn {
        margin-right: 20px;
      }
    }
    .inner-box {
      width: 100%;
      height: calc(100% - 72px);
      display: flex;
      justify-content: flex-start;
      .inner-header {
        width: 100%;
        height: 40px;
        box-sizing: border-box;
        padding: 0 20px;
        background-color: #ccd0d7;
        font: 16px/40px "PingFangSC-Medium";
        color: #455f85;
      }
      .inner-left {
        width: 350px;
        height: 100%;
        border: 1px solid #cccccc;
        margin-right: 20px;
        border-radius: 6px;
        /deep/ .el-tree-node__label {
          color: #333333;
          font: 12px/32px "PingFangSC-Regular";
        }
        /deep/.el-tree-node__content .el-icon-caret-right:before {
          content: "\e6dc";
        }
        /deep/.el-tree:first-child>.el-tree-node:first-child>.el-tree-node__content:first-child>.el-icon-caret-right:before{
          content: "\e6dc";
          color: red;

        }
        
        /deep/ .is-leaf {
          color: none;
          visibility: hidden;
        }
        /deep/ .el-tree-node:focus > .el-tree-node__content {
          background-color: #6c8ab6;
          border-radius: 4px;
          color: red;
          .el-tree-node__label {
            color: #fff;
          }
          .el-icon-caret-right:before {
            color: #fff;
          }
        }
      }
      .inner-right {
        width: 790px;
        height: 100%;
        border: 1px solid #cccccc;
        border-radius: 6px;
      }
    }
    .inner-left-content {
      width: 100%;
      height: calc(100% - 40px);
      box-sizing: border-box;
      padding: 10px 15px;
    }
  }
}
</style>